<template>
  <view class="preRender-show">
    <view class="icon-sendFail" v-if="!(preRenderLoading() && closeLoading)"></view>
    <!-- 图片/视频消息 -->
    <view class="connect-block-right" style="padding: 0px;"
      v-if="
        fileObj &&
        fileObj.content.info.type &&
        (fileObj.content.info.type === 'img' ||
          fileObj.content.info.type === 'video')
      "
    >
      <view class="video-bg">
        <view class="char-pic" style="border-radius: unset; border: unset; margin: unset"></view>
        <image
          src="@/static/image/play.png"
          class="play-icon"
          v-if="fileObj.content.info.type === 'video'"
        />
        <view class="loading-show" v-if="preRenderLoading() && closeLoading">
          <u-loading-icon size="40" color="#61bdb2" mode="circle"></u-loading-icon>
        </view>
      </view>
      <view v-if="fileObj.expansion && fileObj.expansion.content" v-html="setLinkTextOpenToHtml(fileObj.expansion.content)" style="padding: 20upx"></view>
    </view>
    <!-- 文件信息 -->
    <view class="connect-block-right" style="padding: 20upx" v-else>
      <view
        class="chart-call"
        style="padding: 0upx"
      >
        <view class="file-type-cicle">
          <image
            src="@/static/image/chart/file_my.png"
            class="file-type-image"
          ></image>
          <view class="file-type-keyword">
            {{
              identifyFileType(fileObj.content.info.name)
                .slice(0, 1)
                .toUpperCase()
            }}
          </view>
        </view>
        <view class="chart-file-container">
          <view class="file-content">
            <text>{{ fileObj.content.info.name }}</text>
          </view>
          <text class="file-size">{{
            getSize(fileObj.content.info.size)
          }}</text>
        </view>
      </view>
      <view
        v-html="setLinkTextOpenToHtml(fileObj.expansion.content)"
        v-if="fileObj.expansion && fileObj.expansion.content"
        style="margin-top: 20upx"
      ></view>
      <view class="loading-show" v-if="preRenderLoading() && closeLoading">
        <u-loading-icon size="40" color="#61bdb2" mode="circle"></u-loading-icon>
      </view>
    </view>
  </view>
</template>

<script>
import uLoadingIcon from '../../../uni_modules/uview-ui/components/u-loading-icon/u-loading-icon.vue';
export default {
  components: { uLoadingIcon },
  data() {
    return {
      closeLoading: true,
    };
  },
  props: {
    fileObj: {
      type: Object,
      default: () => {},
    },
  },
  methods: {
    /** 换算文件大小 */
    getSize(size) {
      if (!size) return "0K";
      var num = 1024.0; // byte
      if (size < num) return size + "B";
      if (size < Math.pow(num, 2)) return (size / num).toFixed(2) + "K"; // kb
      if (size < Math.pow(num, 3)) {
        return (size / Math.pow(num, 2)).toFixed(2) + "M";
      } // M
      if (size < Math.pow(num, 4)) {
        return (size / Math.pow(num, 3)).toFixed(2) + "G";
      } // G
      return (size / Math.pow(num, 4)).toFixed(2) + "T"; // T
    },
    // 识别文件类型
    identifyFileType(filename) {
      // 根据文件名返回对应文件类型
      let type = "unknown";
      if (!filename) return type;
      const index = filename.lastIndexOf(".");
      let extension = filename.substr(index + 1).toLowerCase();
      extension = extension.split("?")[0];
      const typeMap = {
        img: [
          "gif",
          "jpg",
          "jpeg",
          "png",
          "bmp",
          "webp",
          "ico",
          "psd",
          "svg",
          "tiff",
        ],
        video: [
          "mp4",
          "m3u8",
          "rmvb",
          "avi",
          "swf",
          "3gp",
          "mkv",
          "flv",
          "VIDEO",
        ],
        audio: ["mp3", "wav", "wma", "ogg", "aac", "flac"],
        doc: ["doc", "docx", "pages", "epub", "numbers", "keynote", "km"],
        // document: ['doc', 'txt', 'docx', 'pages', 'epub', 'pdf', 'numbers', 'csv', 'xls', 'xlsx', 'keynote', 'ppt', 'pptx']
        ppt: ["ppt", "pptx"],
        xls: ["csv", "xls", "xlsx"],
        pdf: ["pdf"],
        mind: ["km", "mm", "mmap", "xmind"],
        zip: ["rar", "zip", "7z", "jar", "gz"],
        txt: ["txt"],
      };
      Object.keys(typeMap).forEach((_type) => {
        const extensions = typeMap[_type];
        if (extensions.indexOf(extension) > -1) {
          type = _type;
          return type;
        }
      });
      return type;
    },
    preRenderLoading() {
      const loadingTime = 1000 * 60 * 3;
      if (this.fileObj && this.fileObj.sentTime) {
        // 当前时间减去获取到的时间
        const subTime = new Date().getTime() - this.fileObj.sentTime;
        if (subTime < loadingTime) {
          setTimeout(() => {
            this.closeLoading = false;
          }, loadingTime - subTime);
        }
        return subTime < loadingTime;
      } else {
        return false;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .a-link {
  font-size: 14px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #1765da;
  text-decoration: none;
  cursor: pointer;
}

.icon-sendFail {
  width: 24upx;
  height: 24upx;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-image: url("~@/static/image/chat/sendFail.png");
  position: absolute;
  right: 44upx;
  bottom: 20upx;
  z-index: 1;
}

.loading-show {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(255, 255, 255, 0.9);
  z-index: 6;
}
.video-bg {
  width: 100%;
  height: fit-content;
  background: #191A19;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.omit {
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
  word-wrap: break-word;
  white-space: pre-wrap;
  word-break: break-word;
}
.preRender-show {
  width: fit-content;
  height: fit-content;
  display: inline-block;
  position: relative;
}
.connect-block-right {
  border-radius: 20rpx 0px 20rpx 20rpx;
  background: #61bdb2;
  box-sizing: border-box;
  padding: 20upx 30upx;
  margin: 0 24upx 0 104upx;
  font-size: 28upx;
  font-weight: 400;
  color: #ffffff;
  line-height: 44upx;
  word-break: break-word; // 强制换行
  position: relative;
  overflow: hidden;
  z-index: 0;
}

.char-pic {
  width: 300rpx;
  height: 300rpx;
  border-radius: 20rpx 0px 20rpx 20rpx;
  opacity: 1;
  border: 2rpx solid #ffffff;
  margin: 0 24rpx;
}

// 播放视频图标样式
.play-icon {
  z-index: 4;
  width: 80rpx;
  height: 80rpx;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.chart-call {
  display: flex;
  align-items: center;
  white-space: nowrap;
  padding: 20rpx;
}

.file-type-cicle {
  position: relative;
  display: flex;

  .file-type-image {
    width: 116rpx;
    height: 116rpx;
  }

  .file-type-keyword {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-weight: 700;
  }
}

.chart-file-container {
  max-width: 254rpx;
  font-size: 28rpx;
  font-family: HarmonyOS Sans-Regular, HarmonyOS Sans;
  font-weight: 400;
  line-height: 40rpx;
  margin-left: 20rpx;
}

.file-content {
  word-break: break-all;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  white-space: break-spaces;
}

.file-size {
  font-size: 24rpx;
  color: rgba(255, 255, 255, 0.3);
  line-height: 36rpx;
}
</style>
